
import React, { useState, useEffect } from 'react'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import './index.scss';
import { Layout, Pagination } from 'antd';
const { Content } = Layout;

function Notice(props) {

    const [noticeList, setNoticeList] = useState([
        { id: 1, title: 'ETH与USDT提币手续费临时调整公告', time: '2021/02/23' },
        { id: 2, title: '蛙比特春节放假通知与业务安排', time: '2021/02/23' },
        { id: 3, title: '算力套餐上线通知', time: '2021/02/23' },
        { id: 4, title: '抽奖活动额外奖励名单', time: '2021/02/23' },
        { id: 5, title: 'BTC/BCH算力套餐上线通知', time: '2021/02/23' }
    ])

    const [current, setCurrent] = useState(1)
    const [total, setTotal] = useState(50)
    const [pageSize, setPageSize] = useState(10)

    const onChange = page => {
        setCurrent(page)
    };

    const toDtail = id => {
        props.history.push({ pathname: `/noticeDetail/${id}` })
    }

    const noticeItem = (value, index) => {
        return (
            <div className="notice-item" key={index} onClick={() => toDtail(value.id)}>
                <h3>{value.title}</h3>
                <p>{value.time}</p>
            </div>
        )
    }

    return (
        <Layout className="layout notice">
            <HeaderBox />
            <Content>
                <section className="notice-top">
                    <h1>新闻公告</h1>
                    <p>对于我们的读者，请在下面查阅媒体关于鲸矿最新的文章报道</p>
                    <p>对于咨询媒体，请通过<a>service@jingkuang.com</a>联系我们</p>
                </section>
                <section className="notice-main">
                    <div className="main">
                        {
                            noticeList.map((value, index) => {
                                return noticeItem(value, index)
                            })
                        }
                        <div className="pagination">
                            <Pagination current={current} onChange={onChange} total={50} pageSize={pageSize} />
                        </div>
                    </div>
                </section>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default Notice